<template>

  <div class="what">
    <div class="w">
      <div class="what-title" v-l='"WhatCan"'></div>
       <!-- :class="{fadeInDown:showBox}" -->
      <div class="what-main  animated" >
        <div class="what-nav">
          <div class="what-nav-item " :class="{cur:swiperIndex==0}" @click="swiperIndex = 0">
            <div>
              <img src="../../assets/image/pp1.png"  v-if="swiperIndex!=0"/>
              <img src="../../assets/image/ppc1.png" v-else/>
            </div>
            <div class="what-name">Direct Installs</div>
          </div>
          <div class="what-nav-item" :class="{cur:swiperIndex==1}" @click="swiperIndex = 1">
            <div>
              <img src="../../assets/image/pp2.png"  v-if="swiperIndex!=1"/>
              <img src="../../assets/image/ppc2.png" v-else/>
            </div>
            <div class="what-name">Keyword Installs</div>
          </div>
          <div class="what-nav-item" :class="{cur:swiperIndex==2}" @click="swiperIndex = 2">
            <div>
              <img src="../../assets/image/pp3.png"  v-if="swiperIndex!=2"/>
              <img src="../../assets/image/ppc3.png" v-else/>
            </div>
            <div class="what-name">Guarantee Keyword Ranking</div>
          </div>
          <div class="what-nav-item" :class="{cur:swiperIndex==3}" @click="swiperIndex = 3">
            <div>
              <img src="../../assets/image/pp4.png"  v-if="swiperIndex!=3"/>
              <img src="../../assets/image/ppc4.png" v-else/>
            </div>
            <div class="what-name">Guarantee App Ranking</div>
          </div>
          <div class="what-nav-item" :class="{cur:swiperIndex==4}" @click="swiperIndex = 4">
            <div>
              <img src="../../assets/image/pp5.png"  v-if="swiperIndex!=4"/>
              <img src="../../assets/image/ppc5.png" v-else/>
            </div>
            <div class="what-name">Ratings and Reviews</div>
          </div>
          <div class="what-nav-item" :class="{cur:swiperIndex==5}" @click="swiperIndex = 5">
            <div>
              <img src="../../assets/image/pp6.png"  v-if="swiperIndex!=5"/>
              <img src="../../assets/image/ppc6.png" v-else/>
            </div>
            <div class="what-name">Keyword Basic Optimization</div>
          </div>
          <div class="what-nav-item" :class="{cur:swiperIndex==6}" @click="swiperIndex = 6">
            <div>
              <img src="../../assets/image/pp7.png"  v-if="swiperIndex!=6"/>
              <img src="../../assets/image/ppc7.png" v-else/>
            </div>
            <div class="what-name">Apple Search Ads Services</div>
          </div>
        </div>


        <div class="what-content" style="position: relative;height: 540px;">
          <div style="	position: relative;overflow: hidden;transition: all 0.5s;"
            :style="{top:(540*-swiperIndex)+'px'}">
            <div class="what-swiper-box">
              <img src="../../assets/image/hero-img.png" class="fj-img" />
              <div class="wc-title">Direct Installs</div>
              <div class="wc-main">
                <img src="../../assets/image/yh.png" class="wc-img" />
                <ul>
                  <li>Make your app installs amount look better and attract more users to download.</li>
                  <li>The key metric of app markets is to focus on the number of downloads your app gets.</li>
                  <li>Increase the download volume and ranking to boost your app's reputation.</li>
                </ul>
                <div>
                  <div class="mybtn" style="margin-top: 60px;" @click="$router.push('/contact')">
                    GET INSTALL <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="what-swiper-box">
              <img src="../../assets/image/hero-img.png" class="fj-img" />
              <div class="wc-title">Keyword Installs</div>
              <div class="wc-main">
                <img src="../../assets/image/yh.png" class="wc-img" />
                <ul>
                  <li>Keyword Installs Improve your app's ranking for the specific keyword to maintain continuous growth. </li>
                  <li>Climb up the search results for your app's most trending keywords and level up the discoverability. </li>
                  <li>Get more organic traffic and installs that come as a result of achievingkeyword installs.</li>
                </ul>
                <div>
                  <div class="mybtn" style="margin-top: 60px;" @click="$router.push('/contact')">
                    GET INSTALL <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="what-swiper-box">
              <img src="../../assets/image/hero-img.png" class="fj-img" />
              <div class="wc-title">Guarantee Keyword Ranking</div>
              <div class="wc-main">
                <img src="../../assets/image/yh.png" class="wc-img" />
                <ul>
                  <li>Ensure your app keywords rank in #Top 1-5 positions, maintaining the promotional efforts.</li>
                  <li>Guarantee results for any keywords in Android & iOS App Store. </li>
                  <li>No charge if we don't reach the target rank!</li>
                </ul>
                <div>
                  <div class="mybtn" style="margin-top: 60px;" @click="$router.push('/contact')">
                    GET INSTALL <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="what-swiper-box">
              <img src="../../assets/image/hero-img.png" class="fj-img" />
              <div class="wc-title">Guarantee App Ranking</div>
              <div class="wc-main">
                <img src="../../assets/image/yh.png" class="wc-img" />
                <ul>
                  <li>Ensure your app chart rank in #Top 1-5 positions, maintaining the promotional efforts.</li>
                  <li>Guarantee results for any chart in Android & iOS App Store.</li>
                  <li>No charge if we don't reach the target rank!</li>
                </ul>
                <div>
                  <div class="mybtn" style="margin-top: 60px;" @click="$router.push('/contact')">
                    GET INSTALL <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="what-swiper-box">
              <img src="../../assets/image/hero-img.png" class="fj-img" />
              <div class="wc-title">Ratings and Reviews</div>
              <div class="wc-main">
                <img src="../../assets/image/yh.png" class="wc-img" />
                <ul>
                  <li>High amounts of positive ratings and reviews will grant your app with better conversion rates.</li>
                  <li>Grow the chances of your app being recommended, and make you morecredible by new users.</li>
                  <li>Make sure to be positive and helpful for app ranking by providing 4/5 starratings & reviews.</li>
                </ul>
                <div>
                  <div class="mybtn" style="margin-top: 60px;" @click="$router.push('/contact')">
                    GET INSTALL <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="what-swiper-box">
              <img src="../../assets/image/hero-img.png" class="fj-img" />
              <div class="wc-title">Keyword Basic Optimization</div>
              <div class="wc-main">
                <img src="../../assets/image/yh.png" class="wc-img" />
                <ul>
                  <li>Make your app cover more keywords.</li>
                  <li>Include App Name, Subtitle, Keyword Field and Description.</li>
                  <li>Combines of competing products, recent popular apps and App Store keywords search result.</li>
                </ul>
                <div>
                  <div class="mybtn" style="margin-top: 60px;" @click="$router.push('/contact')">
                    GET INSTALL <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="what-swiper-box">
              <img src="../../assets/image/hero-img.png" class="fj-img" />
              <div class="wc-title">Apple Search Ads Services</div>
              <div class="wc-main">
                <img src="../../assets/image/yh.png" class="wc-img" />
                <ul>
                  <li>Create and manage Apple Ads campaigns, select and bid keywords, use CPP and more tools.</li>
                  <li>Accept the client's advertising goals: cpa, cpi, retention rate, user payment, ROI, etc.</li>
                  <li>Daily multidimensional data reporting using Excel, Google Sheet or other methods.</li>
                </ul>
                <div>
                  <div class="mybtn" style="margin-top: 60px;" @click="$router.push('/contact')">
                    GET INSTALL <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>




        </div>


      </div>
    </div>


  </div>
</template>

<script>
  export default {

    data() {
      return {
        showBox:true,
        swiperIndex: 0,
      }
    },
    mounted() {
      let this_ = this;
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      handleScroll() {
        let this_ = this;
        if (window.scrollY >= 800) {
          this_.showBox = true;
        }
      }
    },
    beforeDestroy() {
      // 移除滚动事件监听
      window.removeEventListener('scroll', this.handleScroll);
    },


  }
</script>

<style>
</style>
